<template>
      <section class="main">
        <input v-model="toggleAllTodoData" id="toggle-all" class="toggle-all" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <!-- These are here just to show the structure of the list items -->
          <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
          <li v-for="item in activeData" v-on:click. v-bind:key="item.id" 
          :class="{
            completed: item.completed,
            editing:dbclick === item
          }"

          >
            <div class="view">
              <input v-model="item.completed" class="toggle" type="checkbox" checked>
              <label @dblclick="goOrLeaveEdit(item)">
                {{item.title}}
                <sub style="font-size: 1px">{{item.id | dateFilter}}</sub>             
              </label>
              <button @click="$emit('removeData',item)" class="destroy"></button>
            </div>
            <input 
            v-on:keyup.enter="updateTodo(item,$event)"
            @dblclick="goOrLeaveEdit(item)"
            class="edit" 
            @blur="goOrLeaveEdit(item)" 
            v-myfocus="item === dbclick"
            :value="item.title" >
          </li>
<!--           <li>
  <div class="view">
    <input class="toggle" type="checkbox">
    <label>Buy a unicorn</label>
    <button class="destroy"></button>
  </div>
  <input class="edit" value="Rule the web">
</li> -->
        </ul>
      </section>
</template>
<script>
  export default {
    props:['todoData','filterText'],
    data(){
      return {
        dbclick:"",
        flag:0

      }
    },
    methods:{
      goOrLeaveEdit(target){
        if(target === this.dbclick){
          this.dbclick = ""
          return
        }
        this.dbclick = target

      },
      updateTodo(item,even) {
        const target = even.target
        this.$emit("updateTodo",item,even.target.value)
        target.value = ''
        target.blur()
        
      }

    },
    computed:{
      activeData:function () {
        let temp = null
        if(this.filterText === 'completed'){
          temp = function (item) {
            return item.completed
          }
        }
        if(this.filterText === 'active') {
          temp = function (item) {
            return (!item.completed)
          }
        }
        if(temp){
          return this.todoData.filter(temp)
        }
        return this.todoData
      },
      toggleAllTodoData:{
        get() {
          if(this.todoData.filter(e=>{return e.completed === false}).length === 0 ){
            return true
          }
          return false

        },
        set (value) {
          this.$emit('toggleAll',value)

        }

      }
    }
    ,
    directives: {
      myfocus: {
        // 指令的定义
        update: function (el,bingding) {
          if( bingding.value){
            console.log(el,bingding)
            el.focus()
          }

        }
      }
    },
    filters:{
      dateFilter (value) {
        let date = new Date(value)
        date = date.toLocaleString()
        while (date.indexOf("/") !== -1){
            date = date.replace('/','-')
        }
        return date
      }
    }
  }
</script>